<template>
    <div>
        <!--<input type="text" placeholder="请输入内容" @keydown="submit" />-->

        <div class="textbox">
            <div class="textbox-box">
                <div class="textbox-face textbox-side"></div>
                <div class="textbox-face textbox-bottom"></div>
                <div class="textbox-face textbox-top"></div>
                <div class="textbox-field">
                    <div class="textbox-label">文本框</div>
                    <input class="textbox-text" type="text" placeholder="请输入内容..." ref="input" @keydown="submit" />
                </div>
                <div class="textbox-action" @click="send">
                    <div class="textbox-face textbox-side"></div>
                    <div class="textbox-face textbox-top"></div>
                    <div class="textbox-face textbox-bottom"></div>
                    <svg viewBox="0 0 24 24">
                        <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SocketSendMassege",
        props: {
            socket: {
                type: Object,
                default: ()=>null
            }
        },
        data(){
            return {
                value: ""
            }
        },
        methods: {
            submit(e){
                if(e.key === "Enter" && this.$props.socket){
                    this.$props.socket.emit('chat_message', e.target.value);
                    e.target.value= '';
                }
            },
            send(){
                this.$props.socket.emit('chat_message', this.$refs.input.value);
                this.$refs.input.value=''
            }
        }
    }
</script>

<style scoped>
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    .textbox {
        margin: 5px auto;
        width: 280px;
        height: 110px;
        position: relative;
        transform-style: preserve-3d;
        animation: turnaround 20s infinite;
    }
    .textbox-box {
        background-color: #e3f6f5;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: inset 0 0 0 3px #272343;
        position: relative;
        animation: hover 2s alternate infinite;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 0.2s ease;
    }
    .textbox-field {
        display: flex;
        flex-direction: column;
        padding: 10px 15px 15px;
        align-self: stretch;
        border-radius: 5px;
    }
    .textbox-label {
        transform: translateZ(20px);
        text-transform: uppercase;
        font-weight: bold;
        animation: hover 2s -0.2s alternate infinite;
        color: #272343;
        -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    }
    .textbox-action {
        height: 80px;
        width: 80px;
        min-width: 80px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        -border-radius: 100px;
        transform-style: preserve-3d;
        animation: hover 2s -0.4s alternate infinite;
        background-color: #bae8e8;
        position: relative;
        transition: all 0.2s ease;
    }
    .textbox-action svg {
        fill: #272343;
        width: 65%;
        height: 65%;
        animation: hover 2s -0.6s alternate infinite;
        -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    }
    .textbox-action .textbox-face {
        background-color: #66a8a8;
        transition: all 0.2s ease;
    }
    .textbox-action .textbox-side {
        width: 10px;
    }
    .textbox-action .textbox-bottom,
    .textbox-action .textbox-top {
        height: 10px;
    }
    .textbox-action:hover {
        cursor: pointer;
        background-color: #9ccece;
    }
    .textbox-action:hover .textbox-face {
        background-color: #468282;
    }
    .textbox-text {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        font: 2.5rem sans-serif;
        animation: hover 2s -0.4s alternate infinite;
        display: block;
        color: #272343;
        -webkit-filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
    }
    .textbox-text::-webkit-input-placeholder {
        color: #272343;
        opacity: 0.5;
    }
    .textbox-text:-ms-input-placeholder {
        color: #272343;
        opacity: 0.5;
    }
    .textbox-text::-ms-input-placeholder {
        color: #272343;
        opacity: 0.5;
    }
    .textbox-text::placeholder {
        color: #272343;
        opacity: 0.5;
    }
    .textbox-text:focus {
        outline: none;
    }
    .textbox-face {
        position: absolute;
        background-color: #272343;
        left: 0;
    }
    .textbox-side {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        height: 100%;
        width: 20px;
        top: 0;
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
    }
    .textbox-bottom {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
        height: 20px;
        width: 100%;
        bottom: 0;
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
    }
    .textbox-top {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        height: 20px;
        width: 100%;
        top: 0;
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }


    @keyframes hover {
        from {
            -webkit-transform: translateZ(10px);
            transform: translateZ(10px);
        }
        to {
            -webkit-transform: translateZ(20px);
            transform: translateZ(20px);
        }
    }

    @keyframes turnaround {
        0% {
            transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
        }
        33% {
            transform: perspective(500px) rotateY(20deg) rotateZ(-10deg) rotateX(-30deg);
        }
        67% {
            transform: perspective(0) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
        }
        100% {
            transform: perspective(500px) rotateY(70deg) rotateZ(-10deg) rotateX(30deg);
        }
    }
    .reference {
        position: absolute;
        right: 20px;
        bottom: 15px;
    }
    .reference img {
        width: 35px;
        height: 35px;
    }

</style>
